<template>
	<view class="container">
		<button class="item" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<view class="left">头像</view>
			<view class="right">
				<image v-if='userInfo.avatar' :src="userInfo.avatar" class="avatar"></image>
				<image v-else src="@/static/default-avatar.png" class="avatar"></image>
				<image class="arrow" src="@/static/right2.png"></image>
			</view>
		</button>
		
		<view class="item" @click="enterNickName">
			<view class="left">昵称</view>
			<view class="right">
				<text v-if="userInfo.nick_name == ''">请设置昵称</text>
				<text v-else>{{userInfo.nick_name}}</text>
				<image class="arrow" src="@/static/right2.png"></image>
			</view>
		</view>
		
		<view class="item" @click="enterRealName">
			<view class="left">姓名</view>
			<view class="right">
				<text v-if="userInfo.real_name == ''">请输入姓名</text>
				<text v-else>{{userInfo.real_name}}</text>
				<image class="arrow" src="@/static/right2.png"></image>
			</view>
		</view>
		
		<view class="prompt-box" :hidden="isHidden">
			<view class="prompt-content contentFontColor">
				<view class="prompt-title">修改昵称</view>
				<input class="prompt-input" type="text" @input="_input" :value="cost"/>
				<view class="prompt-btn-group">
					<button class="btn-item prompt-cancel-btn contentFontColor" @tap="_cancel">取消</button>
					<button class="btn-item prompt-certain-btn" @click="_confirm">确定</button>
				</view>
			</view>
		</view>
		
		<view class="prompt-box" :hidden="isHiddenRealName">
			<view class="prompt-content contentFontColor">
				<view class="prompt-title">修改姓名</view>
				<input class="prompt-input" type="text" @input="_inputRealName" :value="realNameTemp"/>
				<view class="prompt-btn-group">
					<button class="btn-item prompt-cancel-btn contentFontColor" @tap="_cancelRealName">取消</button>
					<button class="btn-item prompt-certain-btn" @click="_confirmRealName">确定</button>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import { User } from '@/utils/model/user-model.js';
	var user = new User();
	export default{
		data(){
			return{
				userInfo:{},
				isHidden: true,
				cost:'',
				isHiddenRealName: true,
				realNameTemp:''
				//avatar: 'https://cdn.uviewui.com/uview/common/logo.jpg'
			}
		},
		onShow() {
			const that = this;
			uni.showLoading({
				title:'加载中'
			})
			
			user.getDetail().then(res => {
				if(res.code == 1){
					that.userInfo = res.data.userInfo
				}
			}).catch(err => {
				
			}).finally(() => uni.hideLoading())
		},
		methods:{
			//退出登录
			logout(){
				uni.showModal({
					title: '提示',
					content: '确认退出登录吗',
					success: function(res) {
						if (res.confirm) {
							useStore.userLogout()
						}
					}
				})
			},
			//更改头像
			onChooseAvatar(e){
				const that = this;
				const tempFilePath = e.detail.avatarUrl //上传的图片地址
				const maxSizeInBytes = 1024 * 1024 // 限制大小为1MB
				uni.getFileInfo({
					filePath: tempFilePath,
					success: ress => {
						const fileSize = ress.size
						if (fileSize > maxSizeInBytes) {
							//如果上传的图片大小超过1MB，进行提示		请上传小于1MB的图片
							uni.showToast({
								title: '上传的图片过大'
							})
							return
						}
						//图片大小符合，替换图片
						user.updateAvatar(tempFilePath).then(res => {
							if(res.code == 1){
								that.userInfo.avatar = res.data.avatar
								that.$forceUpdate()
							}
						}).catch(err => {
							console.log('ggggggggggggggggggggggggggggggggggg')
							console.log(err)
							
						})
					}
				})
			},
			
			enterNickName(){
				 this.isHidden = false;
				 this.cost = this.userInfo.nick_name
			},
			enterRealName(){
				this.isHiddenRealName = false;
				this.realNameTemp = this.userInfo.real_name
			},
			//修改手机号
			enterMobile(){
				uni.navigateTo({
					url: 'phone'
				})
			},
			hide() {
			  this.isHidden = true;
			},
			hiddenRealName() {
			  this.isHiddenRealName = true;
			},
			show(e) {
			  this.isHidden=false;
				if(e!=null&&e!=undefined&&e!=""){
					// this.text = e;
				}
			},
			/*
			 * 内部私有方法建议以下划线开头
			  * triggerEvent 用于触发事件
			 */
			_cancel () {
				//触发cancel事件，即在外部，在组件上绑定cancel事件即可，bind:cancel，像绑定tap一样
			  this.cost = '';
			  this.hide();
			  //this.$emit('onCancel');
			},
			/*
			 * 内部私有方法建议以下划线开头
			  * triggerEvent 用于触发事件
			 */
			_cancelRealName () {
				//触发cancel事件，即在外部，在组件上绑定cancel事件即可，bind:cancel，像绑定tap一样
			  this.realNameTemp = '';
			  this.hiddenRealName();
			  //this.$emit('onCancel');
			},
			_confirm () {
				let that = this;
				console.log(this.cost);
				if(!that.cost){
					uni.showToast({
						title: '昵称不能为空!'
					})
					return
				}
			  if(that.cost === that.userInfo.nick_name){
				  uni.showToast({
				  	title: '与之前昵称相同!'
				  })
				  return
			  }
			  
			  var userInfo = {
					nick_name: that.cost
			  }
			  
			  user.updateUserInfo(userInfo).then(res => {
			  	console.log('aaaaaaaaaaaaaaaaaaaaaa')
			  	console.log(res)
				
				if(res.code == 1){
					uni.showToast({
						title: '更改成功',
						icon: 'success'
					})
					that.userInfo.nick_name = that.cost
					this.hide();
				}
			  }).catch(err => {
			  	console.log('eeeeeeeeeeeeeeeeeeeeeeeeeeeeee')
			  	console.log(err)
			  })
			  
			  
			},
			_confirmRealName () {
				let that = this;
				console.log(this.realNameTemp);
				if(!that.realNameTemp){
					uni.showToast({
						title: '姓名不能为空!'
					})
					return
				}
			  if(that.realNameTemp === that.userInfo.real_name){
				  uni.showToast({
				  	title: '与之前姓名相同!'
				  })
				  return
			  }
			  var userInfo = {
				  real_name: that.realNameTemp
			  }
			  user.updateUserInfo(userInfo).then(res => {
				
				if(res.code == 1){
					uni.showToast({
						title: '更改成功',
						icon: 'success'
					})
					that.userInfo.real_name = that.realNameTemp
					this.hiddenRealName();
				}else{
					
				}
				
			  }).catch(err => {
			  	console.log('eeeeeeeeeeeeeeeeeeeeeeeeeeeeee')
			  	console.log(err)
			  })
			  
			  
			},
			_input(e){
				//将参数传出去，这样在getInput函数中可以通过e去获得必要的参数
				//this.triggerEvent("getInput",e.detail);
				this.cost = e.detail.value;
			},
			_inputRealName(e){
				this.realNameTemp = e.detail.value;
			}
		}
	}

</script>

<style>
	page{
		background-color: #F5F5F5;
	}
</style>
 
<style scoped lang="scss">
	
	@import '~@/pages/my/info.scss';
</style>
